<template>
  <div class="navbar">
    <div class="navbar_top">
      <div class="navbar_top_img">
        <img
          src="../../assets/image/header.png"
          alt=""
          class="navbar_top_img_icon"
        />
      </div>
      <div class="navbar_top_title">
        <div class="navbar_top_title_one">欢迎您：{{username}}</div>
        <div class="navbar_top_title_two">{{ time }}</div>
      </div>
    </div>
    <el-row class="tac" style="padding-bottom:80px">
      <el-col :span="24">
        <el-menu
          
          class="el-menu-vertical-demo"
         
         
        >
          <el-submenu
           v-for="(item, index) in getlist.directory"
              :key="index"
              :index="item.name"
              
          >
            <template slot="title">
              <div class="daohangbox">
           
                <div><div class="daohangbox_title"  @click="clickThreeLevel2(item)">{{ item.name }}</div></div>
                
              </div>
            </template>

            <el-menu-item   v-for="(lists, index) in item.function"
                :key="index"
                :index="lists.name"
                 @click="clickThreeLevel(lists)">
              {{ lists.name }}
            </el-menu-item>
        
          </el-submenu>
     
        </el-menu>
      </el-col>
    </el-row>
   
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import { getuser,getNavbar } from "@/api/index";
export default {
  data() {
    return {
     getlist:{},
     dwshos:false,
     msg:'哈哈哈',
     username:'',
      // isRefer:true,
      showNavList: [],
      time: "",
      isClickSearch: false, //是否点击搜索
      searchCon: "",
      // activeIndex: nulls,
    };
  },

  created() {
     
   
   

  },
  mounted() {

  },
  watch: {
    ...mapGetters(["messageString"]),
    messageString(val, i) {
      const ab = val;

      this.getlist = ab;  // console.log(this.getlist,'this.getlist')
      this.$forceUpdate();
    },
  },
  computed: {
    ...mapGetters(["messageString"]),
  },

  variables() {
    return {
      menuText: "#ffffff", // "#bfcbd9"
      menuActiveText: "#ffffff",
      menuBg: "#001529",
    };
  },
  methods: {
     //获取用户个人信息
    init() {
      var param = { sid:window.sid };
      getuser(param).then((res) => {
        const { result, msg, data, id } = res;
        // console.log(res, "接口成功");
        if (result == "ok") {
        this.username=data
        }
      });
    },
    addDate() {
      var date = new Date(),
        time =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();

      this.time = time;
    },
    clickThreeLevel(lists) {
 
      if (lists.url === "/") {
        this.$router.push({
          path: "",
          name: "indexs",
        });
      } else {
       
      this.$emit('navChildEvent',this.dwshos)
    
        this.$router.push({
          path: "/iframe",
          query: {
            url: " + lists.url.replace('.',''),
            // url:lists.url
          },
        });
      }
    },
   clickThreeLevel2(item) {

      if(item.url !=="/"){
     
        this.$emit('navChildEvent',this.dwshos)
        this.$router.push({
          path: "/iframe",
          query: {
            url: " + item.url.replace('.',''),
            // url:"www.baidu.com"
          },
        })
      }
    
    },

    clickOneLevel(item) {
 
      this.$store.commit("SET_MENU_CLCIK", item);
      this.$emit("navChildEvent", item);
      if (!item.directory && item.directory.length === 0) {
        this.$router.push({
          path: "/iframe",
          query: {
            url: " + item.url.replace(/sid=[\w\-\_]+/, "").slice(1),
          },
        });
      }
    },
  },
};
</script>
<style  lang="scss"  >
.el-submenu{
  border-bottom: 1px solid #eadbdb !important;
}
.el-submenu__title{
  font-size: 13px !important;
}
.el-menu-item{
  font-size: 13px !important;
      font-family: "Microsoft YaHei" !important;
}
.el-submenu .el-menu-item{
  
  // text-align: right;
  text-align: left;
  // text-indent: 23px;
}
.daohangbox {
  // position: relative;
  display: flex;
  .daohang_img {
    // position: absolute;
    // margin-top: 20px;
    // top: 20px;
    .daohang_img_icon {
      width: 12px;
      height: 12px;
    }
  }
  .daohangbox_title {
    font-family: "Microsoft YaHei";
}
    // margin-left: 20px;
    // text-align: center;
  }


.navbar_top {
      border-bottom: 1px solid #eadbdb;
    padding-bottom: 18px;

  height: 63px;
  position: relative;
  .navbar_top_img {
    top: 10px;
    left: 16px;
    position: absolute;
    .navbar_top_img_icon {
      width: 50px;
      height: 50px;
    }
  }
  .navbar_top_title {
    margin-left: 80px;
    margin-top: 20px;
    .navbar_top_title_one {
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      line-height: 40px;
    }
    .navbar_top_title_two {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
}
.nav-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
}
.nav-icon img {
  width: 100%;
  height: 100%;
}
.nav-title {
  text-align: center;
  color: #ffffff;
  font-size: 14px;
}
.one-level li {
  margin-top: 59px;
}
.awsui-iconfont {
  font-size: 24px;
}
</style>